<template>
  <div>
    <div class="edit-form-vue frame-page h-panel">
      <Form :label-width="110" :model="data" ref="form" :rules="rules" :showErrorTip="showErrorTip" 
      :validOnChange="false"
      labelPosition="left">        
        <FormItem label="名称" prop="name" :required="required">
          <input type="text" v-model="data.name" />
        </FormItem>
 <FormItem label="按钮Key" prop="slug" :required="required">
          <input type="text" v-model="data.slug" placeholder="add,edit,remove..." />
        </FormItem>
<FormItem label="路径" prop="http_path" :required="required">
          <Tree :option="param" multiple choose-mode="some" v-model="data.http_path" ref="menu"></Tree>
        </FormItem>


      </Form>
    </div>
    <footer class="h-modal-footer">   
      <Poptip content="确认删除?" @confirm="remove(data)"  v-if="data.id"><Button class="h-btn" color="red">删除</Button></Poptip> 
      <Button class="h-btn" color="primary" @click="submit">确定</Button>  
      <Button class="h-btn" @click="close">关闭</Button>
    </footer>
  </div>
</template>
<script>
import oss from 'components/common/oss';
import { fullMenus } from 'js/config/menu-config';

export default {
  props: {
    params: Object,
  },
  components: {
    Oss: oss
  },
  data() {
    return {
      required: true,
      showErrorTip: true,
      adminPermissions:[],
      data: {
        
      },
      param: {
        keyName: 'id',
        titleName: 'title',
        dataMode: 'list',
        parentName: 'parentId',
        datas: [],
        // 单选控制
        selectable(data, level) {
          return !data.children || data.children.length == 0;
        },
        // 多选控制
        checkable(data, level) {
          return !data.children || data.children.length == 0;
        }
      },
      menuOption: {
        datas: fullMenus
      },
      options: {
        filters: {
          mime_types: [
            { title: 'Image files', extensions: 'jpg,gif,png,jpeg,bmp' }
          ]
        }
      },
      rules: {
        required: ['name','http_path']
      }
    };
  },
  watch: {
    required() {
      this.$refs.form.resetValid();
    }
  },
  mounted(){
    this.initDict();
    this.data = this.params;
  },
  methods: {
    initDict (){
      R.Tool.routes().then(resp=>{
        this.param.datas = resp.data;
      });
    },
    submit() {
      let validResult = this.$refs.form.valid();
      if (validResult.result) {
        let data = Object.assign({},this.data);
        if(data.tags){
          data.tags = data.tags.join(',');
        }       
        data.http_path = data.http_path.join(',');
        R.adminPermissions.store(data).then(resp => {
            if(resp.code==200){
              this.$Message.success(resp.message);
            }else{
              this.$Message.warn(resp.message);
            }          
        });
        this.$emit('success');
        this.close();
      }
    },
    remove(data) {
      R.adminPermissions.delete({id:data.id}).then((resp)=>{
        this.$Message.success('删除成功');
        this.$emit('success');
        this.close();
      });      
    },
    close() {   
      this.$emit('close');
    },
    reset() {
      this.$refs.form.resetValid();
    }
  }
};
</script>